<!-- 控制台 -->
<template>
  <div class="dashboard-container">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-header">
        <div class="welcome-icon">
          <el-icon><Monitor /></el-icon>
        </div>
        <div class="welcome-content">
          <h1>欢迎回来，{{ userInfo.username }}！</h1>
          <p>今天是 {{ currentDate }}，祝您工作愉快</p>
          <div class="welcome-stats">
            <span class="stat-item">
              <el-icon><Clock /></el-icon>
              在线时长: {{ onlineTime }}
            </span>
            <span class="stat-item">
              <el-icon><Location /></el-icon>
              管理中心
            </span>
          </div>
        </div>
      </div>
      <div class="welcome-actions">
        <el-button
          type="primary"
          size="large"
          @click="refreshData"
          class="action-btn primary"
          :loading="refreshing"
        >
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
        <el-button
          size="large"
          @click="exportReport"
          class="action-btn secondary"
          :loading="exporting"
        >
          <el-icon><Download /></el-icon>
          导出报表
        </el-button>
      </div>
      <div class="welcome-decoration">
        <div class="decoration-circle"></div>
        <div class="decoration-dots">
          <span v-for="i in 5" :key="i" class="dot"></span>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-card users-card" @click="goToUsers">
          <div class="stat-content">
            <div class="stat-icon users">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalUsers }}</div>
              <div class="stat-label">总用户数</div>
              <div class="stat-trend">
                <div class="trend-item positive">
                  <el-icon><TrendCharts /></el-icon>
                  <span>今日新增 +{{ stats.newUsersToday }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="stat-decoration"></div>
        </div>

        <div class="stat-card orders-card" @click="goToOrders">
          <div class="stat-content">
            <div class="stat-icon orders">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalOrders }}</div>
              <div class="stat-label">总订单数</div>
              <div class="stat-trend">
                <div class="trend-item positive">
                  <el-icon><TrendCharts /></el-icon>
                  <span>今日新增 +{{ stats.ordersToday }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="stat-decoration"></div>
        </div>

        <div class="stat-card revenue-card" @click="goToReports">
          <div class="stat-content">
            <div class="stat-icon revenue">
              <el-icon><Money /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">¥{{ formatNumber(stats.totalRevenue) }}</div>
              <div class="stat-label">总收入</div>
              <div class="stat-trend">
                <div class="trend-item positive">
                  <el-icon><TrendCharts /></el-icon>
                  <span>今日收入 +¥{{ formatNumber(stats.revenueToday) }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="stat-decoration"></div>
        </div>

        <div class="stat-card tables-card" @click="goToTables">
          <div class="stat-content">
            <div class="stat-icon tables">
              <el-icon><Grid /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.activeTables }}/{{ stats.totalTables }}</div>
              <div class="stat-label">台球桌使用率</div>
              <div class="stat-trend">
                <div class="trend-item">
                  <el-icon><DataLine /></el-icon>
                  <span>使用率 {{ Math.round((stats.activeTables / stats.totalTables) * 100) }}%</span>
                </div>
              </div>
            </div>
          </div>
          <div class="stat-decoration"></div>
        </div>
      </div>
    </div>

    <!-- 图表和数据 -->
    <div class="charts-section">
      <div class="chart-row">
        <!-- 订单趋势图 -->
        <div class="chart-card">
          <div class="chart-header">
            <div class="chart-title">
              <div class="title-icon">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="title-content">
                <h3>订单趋势</h3>
                <p>实时监控订单变化趋势</p>
              </div>
            </div>
            <div class="chart-controls">
              <el-select
                v-model="orderChartPeriod"
                size="large"
                class="period-select"
              >
                <el-option label="最近7天" value="7days" />
                <el-option label="最近30天" value="30days" />
                <el-option label="最近3个月" value="3months" />
              </el-select>
            </div>
          </div>
          <div ref="orderTrendChart" class="chart-container"></div>
        </div>

        <!-- 收入分析 -->
        <div class="chart-card">
          <div class="chart-header">
            <div class="chart-title">
              <div class="title-icon">
                <el-icon><PieChart /></el-icon>
              </div>
              <div class="title-content">
                <h3>收入分析</h3>
                <p>收入来源和构成分析</p>
              </div>
            </div>
            <div class="chart-controls">
              <el-select
                v-model="revenueChartPeriod"
                size="large"
                class="period-select"
              >
                <el-option label="本周" value="week" />
                <el-option label="本月" value="month" />
                <el-option label="本年" value="year" />
              </el-select>
            </div>
          </div>
          <div ref="revenueAnalysisChart" class="chart-container"></div>
        </div>
      </div>
    </div>

    <!-- 快捷操作和最新动态 -->
    <div class="bottom-section">
      <div class="quick-actions">
        <div class="action-card">
          <div class="action-header">
            <div class="action-title">
              <div class="title-icon">
                <el-icon><Operation /></el-icon>
              </div>
              <div class="title-content">
                <h3>快捷操作</h3>
                <p>常用管理功能快速入口</p>
              </div>
            </div>
          </div>
          <div class="actions-grid">
            <div class="action-item" @click="goToUsers">
              <div class="action-icon users">
                <el-icon><User /></el-icon>
              </div>
              <div class="action-content">
                <h4>用户管理</h4>
                <p>管理用户信息和权限</p>
              </div>
              <div class="action-arrow">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div>

            <div class="action-item" @click="goToOrders">
              <div class="action-icon orders">
                <el-icon><Document /></el-icon>
              </div>
              <div class="action-content">
                <h4>订单管理</h4>
                <p>查看和处理订单信息</p>
              </div>
              <div class="action-arrow">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div>

            <div class="action-item" @click="goToTables">
              <div class="action-icon tables">
                <el-icon><Grid /></el-icon>
              </div>
              <div class="action-content">
                <h4>台球桌管理</h4>
                <p>管理台球桌状态和信息</p>
              </div>
              <div class="action-arrow">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div>

            <div class="action-item" @click="goToReports">
              <div class="action-icon reports">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <div class="action-content">
                <h4>财务报表</h4>
                <p>查看收入和统计报表</p>
              </div>
              <div class="action-arrow">
                <el-icon><ArrowRight /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="recent-activities">
        <div class="activity-card">
          <div class="activity-header">
            <div class="activity-title">
              <div class="title-icon">
                <el-icon><Bell /></el-icon>
              </div>
              <div class="title-content">
                <h3>最新动态</h3>
                <p>系统实时活动记录</p>
              </div>
            </div>
            <div class="activity-actions">
              <el-button text @click="viewAllActivities">
                查看全部
                <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </div>
          <div class="activity-list">
            <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
              <div class="activity-icon" :class="activity.type">
                <el-icon v-if="activity.type === 'user'"><User /></el-icon>
                <el-icon v-else-if="activity.type === 'order'"><Document /></el-icon>
                <el-icon v-else-if="activity.type === 'payment'"><Money /></el-icon>
                <el-icon v-else><Setting /></el-icon>
              </div>
              <div class="activity-content">
                <div class="activity-text">{{ activity.text }}</div>
                <div class="activity-time">
                  <el-icon><Clock /></el-icon>
                  {{ activity.time }}
                </div>
              </div>
              <div class="activity-status" :class="activity.type"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../../store/modules/user';
import { ElMessage } from 'element-plus';
import { getUsers, getUserStats } from '@/api/admin';
import { getOrderStats } from '@/api/order';
import { getTableStats } from '@/api/table';
import * as echarts from 'echarts';
import {
  Refresh,
  Download,
  User,
  Document,
  Money,
  Grid,
  ArrowUp,
  TrendCharts,
  PieChart,
  DataAnalysis,
  Bell,
  Monitor,
  Clock,
  Location,
  DataLine,
  Operation,
  ArrowRight,
  Setting
} from '@element-plus/icons-vue';

export default {
  name: 'Dashboard',
  components: {
    Refresh,
    Download,
    User,
    Document,
    Money,
    Grid,
    ArrowUp,
    TrendCharts,
    PieChart,
    DataAnalysis,
    Bell,
    Monitor,
    Clock,
    Location,
    DataLine,
    Operation,
    ArrowRight,
    Setting
  },
  setup() {
    const router = useRouter();
    const userStore = useUserStore();

    const orderChartPeriod = ref('7days');
    const revenueChartPeriod = ref('month');
    const refreshing = ref(false);
    const exporting = ref(false);

    // 图表DOM引用
    const orderTrendChart = ref(null);
    const revenueAnalysisChart = ref(null);

    // 图表数据
    const chartData = reactive({
      orderTrend: {
        days: [],
        counts: []
      },
      revenueAnalysis: {
        data: []
      }
    });

    // 订单趋势图表配置
    const orderTrendChartOption = computed(() => {
      return {
        title: {
          text: '订单趋势',
          left: 'center',
          textStyle: { fontSize: 16, fontWeight: 'bold' }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c}个订单'
        },
        xAxis: {
          type: 'category',
          data: chartData.orderTrend.days
        },
        yAxis: {
          type: 'value',
          minInterval: 1
        },
        series: [{
          data: chartData.orderTrend.counts,
          type: 'line',
          smooth: true,
          itemStyle: { color: '#409eff' },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
                { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
              ]
            }
          }
        }]
      };
    });

    // 收入分析图表配置
    const revenueAnalysisChartOption = computed(() => {
      return {
        title: {
          text: '收入分析',
          left: 'center',
          textStyle: { fontSize: 16, fontWeight: 'bold' }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: ¥{c} ({d}%)'
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        series: [{
          name: '收入来源',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          data: chartData.revenueAnalysis.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
    });

    // 用户信息
    const userInfo = computed(() => userStore.userInfo || {});

    // 当前日期
    const currentDate = computed(() => {
      return new Date().toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      });
    });

    // 在线时长
    const onlineTime = computed(() => {
      const hours = Math.floor(Math.random() * 8) + 1;
      const minutes = Math.floor(Math.random() * 60);
      return `${hours}小时${minutes}分钟`;
    });

    // 格式化数字
    const formatNumber = (num) => {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万';
      }
      return num.toString();
    };

    // 统计数据
    const stats = reactive({
      totalUsers: 0,
      newUsersToday: 0,
      totalOrders: 0,
      ordersToday: 0,
      totalRevenue: 0,
      revenueToday: 0,
      activeTables: 0,
      totalTables: 6
    });

    // 最新动态
    const recentActivities = ref([
      {
        id: 1,
        type: 'user',
        text: '新用户 张三 注册成功',
        time: '5分钟前'
      },
      {
        id: 2,
        type: 'order',
        text: '用户 李四 预订了1号台球桌',
        time: '10分钟前'
      },
      {
        id: 3,
        type: 'payment',
        text: '收到用户 王五 的充值 ¥100',
        time: '15分钟前'
      },
      {
        id: 4,
        type: 'order',
        text: '订单 #12345 已完成',
        time: '20分钟前'
      },
      {
        id: 5,
        type: 'system',
        text: '系统自动备份完成',
        time: '1小时前'
      }
    ]);

    // 方法
    const refreshData = async () => {
      refreshing.value = true;
      try {
        await loadStats();
        await loadChartData();
        // 重新初始化图表
        setTimeout(() => {
          initCharts();
        }, 100);
        ElMessage.success('数据刷新成功');
      } catch (error) {
        ElMessage.error('数据刷新失败');
      } finally {
        refreshing.value = false;
      }
    };

    const viewAllActivities = () => {
      router.push('/admin/activities');
    };

    const exportReport = async () => {
      exporting.value = true;
      try {
        ElMessage.info('正在生成报表...');

        // 获取统计数据
        const userStatsResponse = await getUserStats();
        const orderStatsResponse = await getOrderStats();

        const userStats = userStatsResponse.data;
        const orderStats = orderStatsResponse.data;

        // 准备报表数据
        const reportData = {
          // 基础统计
          summary: {
            '报表生成时间': new Date().toLocaleString('zh-CN'),
            '总用户数': userStats.totalUsers,
            '今日新增用户': userStats.newUsersToday || 0,
            '活跃用户数': userStats.activeUsers,
            '总订单数': orderStats.total,
            '今日订单数': orderStats.today,
            '总收入': `¥${orderStats.totalRevenue}`,
            '今日收入': `¥${orderStats.todayRevenue}`,
            '使用中台球桌': orderStats.statusStats?.using || 0,
            '总台球桌数': stats.totalTables
          },

          // 用户注册统计
          registrationStats: Object.entries(userStats.registrationStats || {}).map(([month, count]) => ({
            '月份': month,
            '注册用户数': count
          })),

          // 余额分布统计
          balanceStats: Object.entries(userStats.balanceRanges || {}).map(([range, count]) => ({
            '余额范围': range,
            '用户数量': count
          })),

          // 订单趋势统计
          orderTrendStats: (orderStats.dailyTrend || []).map(item => ({
            '日期': item.date,
            '订单数量': item.count
          })),

          // 收入来源统计
          revenueStats: (orderStats.revenueByType || []).map(item => ({
            '收入来源': item.name,
            '金额': `¥${item.value}`
          }))
        };

        // 生成Excel格式的数据
        await generateExcelReport(reportData);

        ElMessage.success('报表导出成功！');
      } catch (error) {
        console.error('导出报表失败:', error);
        ElMessage.error('导出报表失败');
      } finally {
        exporting.value = false;
      }
    };

    // 生成Excel报表
    const generateExcelReport = async (data) => {
      // 创建工作簿内容
      let csvContent = '';

      // 基础统计表
      csvContent += '台球吧管理系统 - 数据报表\n\n';
      csvContent += '=== 基础统计 ===\n';
      csvContent += '项目,数值\n';
      Object.entries(data.summary).forEach(([key, value]) => {
        csvContent += `${key},${value}\n`;
      });

      // 用户注册统计
      csvContent += '\n=== 用户注册统计 ===\n';
      csvContent += '月份,注册用户数\n';
      data.registrationStats.forEach(item => {
        csvContent += `${item['月份']},${item['注册用户数']}\n`;
      });

      // 余额分布统计
      csvContent += '\n=== 用户余额分布 ===\n';
      csvContent += '余额范围,用户数量\n';
      data.balanceStats.forEach(item => {
        csvContent += `${item['余额范围']},${item['用户数量']}\n`;
      });

      // 订单趋势统计
      csvContent += '\n=== 订单趋势统计 ===\n';
      csvContent += '日期,订单数量\n';
      data.orderTrendStats.forEach(item => {
        csvContent += `${item['日期']},${item['订单数量']}\n`;
      });

      // 收入来源统计
      csvContent += '\n=== 收入来源统计 ===\n';
      csvContent += '收入来源,金额\n';
      data.revenueStats.forEach(item => {
        csvContent += `${item['收入来源']},${item['金额']}\n`;
      });

      // 下载文件
      const blob = new Blob(['\uFEFF' + csvContent], {
        type: 'text/csv;charset=utf-8;'
      });
      const link = document.createElement('a');

      if (link.download !== undefined) {
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', `台球吧数据报表_${new Date().toLocaleDateString()}.csv`);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    };

    const goToUsers = () => {
      router.push('/admin/users');
    };

    const goToOrders = () => {
      router.push('/admin/orders');
    };

    const goToTables = () => {
      router.push('/admin/tables');
    };

    const goToReports = () => {
      ElMessage.info('财务报表功能开发中...');
    };

    // 加载统计数据
    const loadStats = async () => {
      try {
        // 从后端获取用户统计数据
        const userStatsResponse = await getUserStats();
        const userStats = userStatsResponse.data;

        // 从后端获取订单统计数据
        const orderStatsResponse = await getOrderStats();
        const orderStats = orderStatsResponse.data;

        // 设置用户统计
        stats.totalUsers = userStats.totalUsers;
        stats.newUsersToday = userStats.newUsersToday || 0;

        // 设置订单统计
        stats.totalOrders = orderStats.total;
        stats.ordersToday = orderStats.today;

        // 设置收入统计
        stats.totalRevenue = orderStats.totalRevenue;
        stats.revenueToday = orderStats.todayRevenue;

        // 设置台球桌统计
        stats.totalTables = 8; // 固定值，后续可以从后端获取
        stats.activeTables = orderStats.statusStats?.using || 0;

      } catch (error) {
        console.error('加载统计数据失败:', error);
        ElMessage.error('加载统计数据失败');
      }
    };

    // 加载图表数据
    const loadChartData = async () => {
      try {
        // 加载订单趋势数据
        const orderStatsResponse = await getOrderStats();
        console.log('订单统计数据:', orderStatsResponse);

        if (orderStatsResponse.success) {
          const orderStats = orderStatsResponse.data;

          // 设置订单趋势图表数据
          if (orderStats.dailyTrend && orderStats.dailyTrend.length > 0) {
            chartData.orderTrend.days = orderStats.dailyTrend.map(item => {
              const date = new Date(item.date);
              return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
            });
            chartData.orderTrend.counts = orderStats.dailyTrend.map(item => item.count);
          } else {
            // 生成最近7天的默认数据
            const days = [];
            const counts = [];
            for (let i = 6; i >= 0; i--) {
              const date = new Date();
              date.setDate(date.getDate() - i);
              days.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
              counts.push(0); // 没有数据时显示0
            }
            chartData.orderTrend.days = days;
            chartData.orderTrend.counts = counts;
          }

          // 设置收入分析图表数据 - 基于订单状态分布
          if (orderStats.statusDistribution && orderStats.statusDistribution.length > 0) {
            const statusMap = {
              'pending': '待支付',
              'paid': '已支付',
              'using': '使用中',
              'completed': '已完成',
              'cancelled': '已取消'
            };

            chartData.revenueAnalysis.data = orderStats.statusDistribution.map(item => ({
              name: statusMap[item.status] || item.status,
              value: item.count
            }));
          } else {
            // 默认数据
            chartData.revenueAnalysis.data = [
              { name: '已完成', value: 1 },
              { name: '使用中', value: 0 },
              { name: '已支付', value: 0 }
            ];
          }
        } else {
          throw new Error('获取订单统计失败');
        }

      } catch (error) {
        console.error('加载图表数据失败:', error);
        // 使用默认数据
        const days = [];
        const counts = [];
        for (let i = 6; i >= 0; i--) {
          const date = new Date();
          date.setDate(date.getDate() - i);
          days.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
          counts.push(0);
        }
        chartData.orderTrend.days = days;
        chartData.orderTrend.counts = counts;

        chartData.revenueAnalysis.data = [
          { name: '已完成', value: 1 },
          { name: '使用中', value: 0 },
          { name: '已支付', value: 0 }
        ];
      }
    };

    // 初始化图表
    const initCharts = () => {
      // 初始化订单趋势图表
      if (orderTrendChart.value) {
        const orderChart = echarts.init(orderTrendChart.value);
        orderChart.setOption(orderTrendChartOption.value);
      }

      // 初始化收入分析图表
      if (revenueAnalysisChart.value) {
        const revenueChart = echarts.init(revenueAnalysisChart.value);
        revenueChart.setOption(revenueAnalysisChartOption.value);
      }
    };

    // 组件挂载时加载数据
    onMounted(async () => {
      await loadStats();
      await loadChartData();

      // 延迟初始化图表，确保DOM已渲染
      setTimeout(() => {
        initCharts();
      }, 100);
    });

    return {
      userInfo,
      currentDate,
      onlineTime,
      stats,
      recentActivities,
      orderChartPeriod,
      revenueChartPeriod,
      orderTrendChart,
      revenueAnalysisChart,
      orderTrendChartOption,
      revenueAnalysisChartOption,
      chartData,
      refreshing,
      exporting,
      refreshData,
      exportReport,
      generateExcelReport,
      formatNumber,
      viewAllActivities,
      goToUsers,
      goToOrders,
      goToTables,
      goToReports
    };
  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
  background: transparent;
  min-height: calc(100vh - 60px);
  overflow: visible;
}

/* 欢迎区域 */
.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  border-radius: 24px;
  margin-bottom: 40px;
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.welcome-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(50%, -50%);
}

.welcome-header {
  display: flex;
  align-items: center;
  gap: 24px;
  z-index: 1;
}

.welcome-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.welcome-content h1 {
  margin: 0 0 12px 0;
  font-size: 36px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.welcome-content p {
  margin: 0 0 16px 0;
  opacity: 0.9;
  font-size: 18px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.welcome-stats {
  display: flex;
  gap: 24px;
  margin-top: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.welcome-actions {
  display: flex;
  gap: 16px;
  z-index: 1;
}

.action-btn {
  padding: 14px 28px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px);
  border: none !important;
}

.action-btn.primary {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.action-btn.primary:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 35px rgba(255, 255, 255, 0.3) !important;
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

.action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-3px) !important;
}

.welcome-decoration {
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  z-index: 1;
}

.decoration-circle {
  width: 200px;
  height: 200px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  position: relative;
}

.decoration-dots {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.decoration-dots .dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: float 3s ease-in-out infinite;
}

.decoration-dots .dot:nth-child(2) {
  animation-delay: 0.6s;
}

.decoration-dots .dot:nth-child(3) {
  animation-delay: 1.2s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-8px); opacity: 1; }
}

/* 统计区域 */
.stats-section {
  margin-bottom: 48px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-card {
  background: white;
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: rgba(102, 126, 234, 0.3);
}

.users-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
}

.orders-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}

.revenue-card {
  background: linear-gradient(135deg, #ffffff 0%, #fef3f2 100%);
}

.tables-card {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
}

.stat-content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.stat-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.stat-icon.users {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.stat-icon.orders {
  background: linear-gradient(135deg, #10b981, #059669);
}

.stat-icon.revenue {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-icon.tables {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 40px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 8px;
  line-height: 1;
}

.stat-label {
  font-size: 16px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 12px;
}

.stat-trend {
  margin-top: 12px;
}

.trend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.trend-item.positive {
  color: #059669;
}

.trend-item .el-icon {
  font-size: 16px;
}

.stat-decoration {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.1;
}

.users-card .stat-decoration {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.orders-card .stat-decoration {
  background: linear-gradient(135deg, #10b981, #059669);
}

.revenue-card .stat-decoration {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.tables-card .stat-decoration {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

/* 图表区域 */
.charts-section {
  margin-bottom: 48px;
}

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.chart-card {
  background: white;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  min-height: 450px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.chart-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.chart-title .title-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.chart-title .title-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.chart-title .title-content p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.chart-controls {
  display: flex;
  gap: 12px;
}

.period-select {
  min-width: 120px;
}

.chart-container {
  height: 320px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 320px;
  color: #64748b;
  background: #f8fafc;
  border-radius: 12px;
}

.chart-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
  color: #94a3b8;
}

/* 底部区域 */
.bottom-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.action-card,
.activity-card {
  background: white;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.action-header,
.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.action-title,
.activity-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.action-title .title-icon,
.activity-title .title-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.action-title .title-content h3,
.activity-title .title-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.action-title .title-content p,
.activity-title .title-content p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.activity-actions {
  display: flex;
  gap: 12px;
}

.actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.action-item:hover {
  border-color: #667eea;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
}

.action-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.action-icon.users {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.action-icon.orders {
  background: linear-gradient(135deg, #10b981, #059669);
}

.action-icon.tables {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.action-icon.reports {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.action-content {
  flex: 1;
}

.action-content h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.action-content p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.action-arrow {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  transition: all 0.3s ease;
}

.action-item:hover .action-arrow {
  transform: translateX(4px);
}

/* 活动列表 */
.activity-list {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

.activity-list::-webkit-scrollbar {
  width: 6px;
}

.activity-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.activity-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.activity-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
  transition: all 0.3s ease;
}

.activity-item:hover {
  background: #f8fafc;
  border-radius: 12px;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 -16px;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 20px;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.activity-icon.user {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.activity-icon.order {
  background: linear-gradient(135deg, #10b981, #059669);
}

.activity-icon.payment {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.activity-icon.system {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 15px;
  color: #1e293b;
  margin-bottom: 8px;
  font-weight: 500;
  line-height: 1.4;
}

.activity-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.activity-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-status.user {
  background: #667eea;
}

.activity-status.order {
  background: #10b981;
}

.activity-status.payment {
  background: #f59e0b;
}

.activity-status.system {
  background: #8b5cf6;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .chart-row {
    grid-template-columns: 1fr;
  }

  .bottom-section {
    grid-template-columns: 1fr;
  }

  .welcome-decoration {
    display: none;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }

  .welcome-section {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 32px 24px;
  }

  .welcome-header {
    flex-direction: column;
    gap: 20px;
  }

  .welcome-stats {
    justify-content: center;
    flex-wrap: wrap;
  }

  .welcome-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stat-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .chart-card {
    padding: 24px;
  }

  .action-card,
  .activity-card {
    padding: 24px;
  }

  .action-item {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .action-arrow {
    transform: rotate(90deg);
  }

  .action-item:hover .action-arrow {
    transform: rotate(90deg) translateY(-4px);
  }
}

@media (max-width: 480px) {
  .welcome-content h1 {
    font-size: 28px;
  }

  .stat-number {
    font-size: 32px;
  }

  .stat-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .action-btn {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  .chart-container {
    height: 250px;
  }
}
</style>
